﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="ProjectTest.Page.Index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
    <script type="text/jscript">
        $(document).ready(function () {
            $(".has_children").click(function () {
                $(this).addClass("highlight").children("a").show().end().siblings().removeClass("hightlight").children("a").hide();
            });

            var dom = $("#menu").html();  //获取id为menu的元素内的html代码. 此方法与document.getElementById("menu").innerHTML相同

            var $cr = $("#crMesic");
            $cr.click(function () {
                if ($cr.is(":checked")) {   //jQuery方式判断
                    alert("您选择了音乐");
                }
            });

        });
    
    </script>
    <style type="text/css">
       #menu {width:300px;}
       .has_children {background : #555; color:#fff;cursor:pointer;}
       .highlight{color:#fff; background: green;}
       div{padding:0; margin:10px 0;}
       div.a{background: #888; display: none; float:left; width:300px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="menu">
        <div class="has_children">
            <span>第一章 - 认识</span> <a>1.1 - JavaScript and JavaScript库</a> <a>1.2 - 加入Jquery</a>
            <a>1.3 - 编写简单Jquery代码</a> <a>1.4 - Jquery对象和DOM对象</a> <a>1.5 - 解决Jquery和其它库的冲突</a>
            <a>1.6 - Jquery开发工具和插件</a> <a>1.7 - 小结</a>
        </div>
        <div class="has_children">
            <span>第二章 - Jquery选择器</span> <a>2.1 - Jquery选择器是什么</a> <a>2.2 - Jquery选择器的优势</a>
            <a>2.3 - Jquery选择器</a> <a>2.4 - 应用Jquery改写示例</a> <a>2.5 - 选择器中的一些注意事项</a> <a>2.6 - 案例研究--类似淘宝网品牌列表的效果</a>
            <a>2.7 - 还有其它选择器么?</a> <a>2.8 - 小结</a>
        </div>
        <div class="has_children">
            <span>第三章 - Jquery中的DOM操作</span> 
            <a>3.1 - DOM操作的分类</a> 
            <a>3.2 - Jquery中的DOM操作</a>
            <a>3.3 - 案例研究--某网站超链接和图片提示效果</a>
            <a>3.4 - 小结</a>
        </div>
    </div>
    <div>
       <h3>例子</h3>
       <p title="选择你最喜欢的水果." id="foo">你最喜欢的水果是?</p>
       <ul>
          <li>苹果</li>
          <li>橘子</li>
          <li>菠萝</li>
       </ul>
    </div>
    <div>
       <fieldset>
          <legend>基本爱好信息</legend>
          <input type="checkbox" id="crMesic"/><label for="crMesic">听歌</label>
          <input type="checkbox" id="crRead" /><label for="crRead">看书</label>
       </fieldset>
    </div>

    <div>
      <p class="demo">Click me</p>
    </div>
    </form>
</body>
</html>
